{extend name="../../../view/public/base" /}
{block name="css"}
<style>
    .layui-laypage .layui-laypage-curr em {
        position: relative;
        color: #fff!important;
    }
    .top-panel {
        border: 1px solid #eceff9;
        border-radius: 5px;
        text-align: center;
    }
    .top-panel > .layui-card-body{
        height: 60px;
    }
    .top-panel-number{
        line-height:60px;
        font-size: 30px;
        border-right:1px solid #eceff9;
    }
    .top-panel-tips{
        line-height:30px;
        font-size: 12px
    }

    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .panels-top-1{
        background: linear-gradient(-125deg, #57bdbf, #2f9de2);
        color: #ffffff;
    }
    .panels-top-2{
        background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
        color: #ffffff;
    }
    .panels-top-3{
        background: linear-gradient(-113deg, #c543d8, #925cc3);
        color: #ffffff;
    }
    .panels-top-4{
        background: linear-gradient(-141deg, #ecca1b, #f39526);
        color: #ffffff;
    }
    .layui-card-header, .top-panel-tips a {
        color: #fff;
        font-weight: 600;
        margin-left: 1em;
    }
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
        padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
{/block}
{block name="body"}
<div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel panels-top-1">
                    <div class="layui-card-header">今日新增会员数量</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md6 top-panel-number">
                               {$user_total.today}
                            </div>
                            <div class="layui-col-xs3 layui-col-md6 top-panel-tips">
                                昨日数量<a>{$user_total.yesterday}</a><br>
                                前七日数量 <a>{$user_total.week}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel panels-top-2">
                    <div class="layui-card-header">今日会员总提现</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md6 top-panel-number">
                                {$extract_total.today}
                            </div>
                            <div class="layui-col-xs3 layui-col-md6 top-panel-tips">
                                昨日提现<a>{$extract_total.yesterday}</a><br>
                                前七日提现 <a>{$extract_total.week}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel panels-top-3">
                    <div class="layui-card-header">今日会员总充值</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md6 top-panel-number">
                                {$recharge_total.today}
                            </div>
                            <div class="layui-col-xs3 layui-col-md6 top-panel-tips">
                                昨日充值<a>{$recharge_total.yesterday}</a><br>
                                前七日充值 <a>{$recharge_total.week}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">
                <div class="layui-card top-panel panels-top-4">
                    <div class="layui-card-header">当前应用数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs12 layui-col-md12 top-panel-number">
                                {$app_total}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    <div class="layuimini-main">
        <div class="layui-box">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-fire icon"></i>用户统计（应用：人数）</div>
                        <div class="layui-card-body layui-text">
                            <div id="container" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统资讯</div>
                        <div class="layui-card-body layui-text">
                            <div class="layui-tab layui-tab-brief" lay-filter="notice_tab">
                                <ul class="layui-tab-title">
                                    {volist name="cate" id="vo" key="k"}
                                    <li  {$k ==1? 'class="layui-this"': '' } data-cate="{$vo.id}" >{$vo.name}</li>
                                    {/volist}
                                </ul>
                            </div>


                            <div id="notice_list"></div>
                            <div id="test1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layuimini-main">
        <div class="layui-box">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa fa-sign-in icon"></i>登录日志(最近10条)</div>
                        <div class="layui-card-body layui-text">
                            <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>用户名</th>
                            <th>登录时间</th>
                            <th>登录IP</th>
                            <th>IP地址</th>
                        </tr>
                        </thead>
                                <tbody id = 'city_info'>
                                <tr>
                                    <td colspan="4" >调用SDK计算ip地址中...</td>
                                </tr>
                                </tbody>
                    </table>
                        </div>
                    </div>
                </div>

                </div>
            </div>
        </div>
    </div>
<script id="notice_template" type="text/html">

    {{#  layui.each(d, function(index, item){ }}
       <div class="layuimini-notice">
         <div class="layuimini-notice-title">{{item.title}}</div>
         <div class="layuimini-notice-extra">{{item.add_time}}</div>
         <div class="layuimini-notice-content layui-hide">{{item.content}}</div>
       </div>
    {{#  }); }}

    {{#  if(d.length === 0){ }}
    <div >
        <div class="layuimini-notice-title">暂无系统资讯</div>
    </div>
    {{#  } }}

</script>

<script id="notice_detail_template" type="text/html">
    <div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">
    <div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">{{d.title}}</h4></div>
    <div style="font-size: 12px">{{d.content}}</div>
    </div>
</script>
{/block}
{block name="js"}
<script>
    /**
     * 查看公告信息
     **/
    var count = 0;
    var laytpl;
    var element;
    var laypage;
    layui.use(['bwajax','laypage','echarts','laytpl','element'], function () {
        var bwajax = layui.bwajax.instance();
             laypage = layui.laypage;
        var echarts = layui.echarts;
        laytpl = layui.laytpl;
        element = layui.element;
        notice.init(bwajax);//加载公告
        echarts_show(bwajax,echarts);
        //退出登录逻辑
        bwajax.get('manage/member/loginInfo').then(function (response) {
            if(response.data.data.errcode == 0){
                //console.log(response.data.data);
                var data_list = response.data.data.data;
                var html = '';
                for(var i = 0; i < data_list.length; i++) {

                    html+='<tr>\n' +
                        '                                    <td>'+data_list[i].name+'</td>\n' +
                        '                                    <td>'+data_list[i].add_time_date+'</td>\n' +
                        '                                    <td >'+data_list[i].ip+'</td>\n' +
                        '                                    <td>'+data_list[i].city_name+'</td>\n' +
                        '                                </tr>';

                };
                if(data_list.length<1){
                    html =  ' <td colspan="4" >没有记录...</td>';
                }
                $('#city_info').html(html);

            }else{
                layer.msg(response.data.msg);
            }
        }) .catch(function (error) {
            var html =  ' <td colspan="4" style="color: red">SDK异常，请刷新重试...</td>';
            $('#city_info').html(html);
        });

    });



    function echarts_show(bwajax,echarts) {
        bwajax.get('manage/member/echartsInfo').then(function (response) {
            if(response.data.data.errcode == 0){
                var source  = response.data.data.data.data;
                var count  = response.data.data.data.count;
                var year  = response.data.data.data.year;
                for (var i=0;i<source[0].length;i++)
                {
                    source[0][i] = source[0][i].toString();
                }
                //console.log(source);
                //拼装series
               var series  =new Array();
                for (var i=0;i<count;i++)
                {
                    var car =  {type: 'line', smooth: true, seriesLayoutBy: 'row'};
                    series.push(car);
                }
                     var last =  {
                         type: 'pie',
                         id: 'pie',
                         radius: '25%',
                         center: ['50%', '30%'],
                         label: {
                             formatter: '{b}: {@'+year[0]+'} ({d}%)'
                         },
                         encode: {
                             itemName: 'product',
                             value: year[0],
                             tooltip: year[0]
                         }
                     };

                series.push(last);
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;

                setTimeout(function () {

                    option = {
                        legend: {},
                        tooltip: {
                            trigger: 'axis',
                            showContent: false
                        },
                        dataset: {
                            source: source
                        },
                        xAxis: {type: 'category'},
                        yAxis: {gridIndex: 0},
                        grid: {top: '55%'},
                        series: series
                    };

                    myChart.on('updateAxisPointer', function (event) {
                        var xAxisInfo = event.axesInfo[0];
                        if (xAxisInfo) {
                            var dimension = xAxisInfo.value + 1;
                            myChart.setOption({
                                series: {
                                    id: 'pie',
                                    label: {
                                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                    },
                                    encode: {
                                        value: dimension,
                                        tooltip: dimension
                                    }
                                }
                            });
                        }
                    });

                    myChart.setOption(option);

                });

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            }else{
                layer.msg(response.data.msg);
            }
        }) .catch(function (error) {
            //console.log(error);

        });


    }



    var notice = {
        data:{
            cate_id:{$cate_id},
            page:1,
            limit:7,
            notice_list:[],
            count:0,
        },
        init:function (bwajax) {
            this.listen('.layuimini-notice'); //资讯点击监听
            this.tab_init('notice_tab'); //资讯分类加载
            this.init_notice(bwajax); //资讯分页加载
        },
        listen:function (el) {
            $('body').on('click', el, function () {
                var jsonObj = {};
                    jsonObj.title = $(this).children('.layuimini-notice-title').text(),
                    jsonObj.noticeTime = $(this).children('.layuimini-notice-extra').text(),
                    jsonObj.content = $(this).children('.layuimini-notice-content').html();
                var getTpl = notice_detail_template.innerHTML;
                laytpl(getTpl).render(jsonObj, function(html){
                    parent.layer.open({
                        type: 1,
                        title: '系统资讯'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+jsonObj.noticeTime+'</span>',
                        area: ['500px', '400px'],
                        shade: 0.2,
                        id: 'layuimini-notice',
                        btn: ['查看', '取消'],
                        btnAlign: 'c',
                        moveType: 1,
                        content:html,
                        success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: 'https://gitee.com/buwangyun/bwsaas',
                                target: '_blank'
                            });
                        }
                    });
                });

            });
        },
        init_notice:function (bwajax) {
            var _this = this;
            this.setNoticeList(bwajax,function () {
                //obj.curr,obj.limit,
                laypage.render({
                    elem: 'test1'
                    ,limit:_this.data.limit
                    ,count:_this.data.count
                    ,jump: function(obj, first){
                        _this.data.page = obj.curr;
                        _this.data.limit = obj.limit;
                        //非首次
                        if(!first){
                            //obj包含了当前分页的所有参数，比如：
                            _this.setNoticeList(bwajax);
                        }
                    }
                });
            })
        },
        setNoticeList:function (bwajax,call_back){
            laytpl = layui.laytpl;
            var _this = this;
            bwajax.get('manage/member/noticeList?page='+_this.data.page+'&limit='+_this.data.limit+'&cate_id='+_this.data.cate_id).then(function (response) {
                if(response.data.data.errcode == 0){
                    _this.data.count = response.data.data.data.total;
                    //console.log(response.data.data);
                    _this.data.notice_list = response.data.data.data.list;

                    _this.build_notice(laytpl);
                    if(call_back){
                        call_back();
                    }
                }else{
                    layer.msg(response.data.msg);
                }
            }) .catch(function (error) {
                console.log(error);
                var html =  '  <div >\n' +
                    '                                    <div class="layuimini-notice-title" style="color: red">数据出错</div>\n' +
                    '                                </div>';
                $('#notice_list').html(html);
            });
        },
        build_notice:function (laytpl){
            var getTpl = notice_template.innerHTML
                , view = document.getElementById('notice_list');
            laytpl(getTpl).render(this.data.notice_list, function(html){
                view.innerHTML = html;
            });
        },
        tab_init:function (lay_filter) {
            var _this = this;
            element.on("tab("+lay_filter+")", function(elem){
                _this.data.cate_id = $(this).attr('data-cate');
                _this.data.page = 1;
                _this.init_notice(bwajax); //资讯分页加载
            });
        }

    };
</script>
{/block}



